<template>
  <section class="menu">
    <div class="primary-menu">
      <ul class="nav-menu">
        <li class="nav-item" :class={home:item.home,sequare:item.sequare,live:item.live,black:item.black} v-for="item in classify">
          <a class="nav-link">
            <div class="num-wrap" v-if="showNum(item)">
              <span class="num">{{item.num}}</span>
            </div>
            <div class="nav-name">{{item.title}}</div>
          </a>
          <ul></ul>
        </li>
      </ul>
      <div class="gif-menu nav-gif">
        <a class="random-p" target="_blank" href="http://search.bilibili.com/all?keyword=%E5%82%AC%E6%B3%AA%E5%90%91&from_source=gif_recommend" title="催泪向">
          <img src="../../../static/images/cxl.gif" />
        </a>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'bmenu',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      classify: [
        {
          title: '首页',
          num: 0,
          home: true
        },
        {
          title: '动画',
          num: 468
        },
        {
          title: '番剧',
          num: 61
        },
        {
          title: '国创',
          num: 18
        },
        {
          title: '音乐',
          num: 749
        },
        {
          title: '舞蹈',
          num: 108
        },
        {
          title: '游戏',
          num: 999
        },
        {
          title: '科技',
          num: 482
        },
        {
          title: '生活',
          num: 988
        },
        {
          title: '鬼畜',
          num: 64
        },
        {
          title: '时尚',
          num: 177
        },
        {
          title: '广告',
          num: 43
        },
        {
          title: '娱乐',
          num: 839
        },
        {
          title: '影视',
          num: 702
        },
        {
          title: '广场',
          num: 0,
          sequare: true
        },
        {
          title: '直播',
          num: 0,
          live: true
        },
        {
          title: '小黑屋',
          num: 0,
          black: true
        }
      ]
    };
  },
  methods: {
    showNum (item) {
      if (item.home || item.sequare || item.live || item.black) {
        return false;
      }
      return true;
    }
  }
};
</script>

<style lang="stylus" scoped>
.nav-gif
  position absolute
  right 0
  top 0
  height 50px
  padding 6px 0
  .random-p
    width 80px
    height 44px
    display inline-block
    vertical-align top
    margin 3px 0
    overflow hidden
    img
      margin 0 auto
.menu
  width 100%
  background #fff
  .primary-menu
    position relative
    width 980px
    height 50px
    margin 0 auto
    padding 6px 0
    z-index 99
.nav-menu
  display inline-block
  .nav-item
    float left
    display block
    position relative
    margin-right -1px
    .nav-link
      width 48px
      text-align center
      display block
      .num-wrap
        position absolute
        top 8px
        left 0
        height 14px
        width 100%
        text-align center
        .num
          display inline-block
          vertical-align top
          font-size 12px
          color #fff
          background-color #ffafc9
          border-radius 4px
          height 12px
          line-height 12px
          min-width 18px
          padding 1px 3px
          font-family: Calibri,Arial,Helvetica,sans-serifsans-serif;
      .nav-name
        display inline-block
        vertical-align middle
        color #222
        font-size 14px
        height 40px
        padding-top 8px
        line-height 50px
  .home
    margin-right 9px
    .nav-link
      width auto
      background url(../../../static/images/icons.d895b84.png) -658px -1170px no-repeat;
  .sequare
    margin 0 16px 0 10px
    line-height 50px
    height 50px
    .nav-link
      display block
      position relative
      overflow hidden
      zoom 1
      width auto
      .nav-name
        display inline-block
        color #222
        height 50px
        margin 0
        font-size 16px
        padding-top 0
        padding-left 22px
        background: url(../../../static/images/icons.d895b84.png) -664px -904px no-repeat
  .live
    margin 0 16px 0 10px
    line-height 50px
    height 50px
    .nav-link
      display block
      position relative
      overflow hidden
      zoom 1
      width auto
      .nav-name
        display block
        float left
        color #222
        height 50px
        margin 0
        font-size 16px
        padding-top 0
        padding-left 22px
        background: url(../../../static/images/icons.d895b84.png) -664px -518px no-repeat
  .black
    margin 0 16px 0 10px
    line-height 50px
    height 50px
    .nav-link
      display block
      position relative
      overflow hidden
      zoom 1
      width auto
      .nav-name
        display block
        float left
        color #222
        height 50px
        margin 0
        font-size 16px
        padding-top 0
        padding-left 22px
        background: url(../../../static/images/icons.d895b84.png) -727px -519px no-repeat
</style>
